<template>
  <div class="container-fluid" id="Label">
    <div class="row">
      <div class="col">
        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane :label="LabelType.MATCH" name="比赛标签">
            <el-button size="default" type="primary" @click="start"
              >刷新</el-button
            >
            <el-button type="primary" @click="submit(LabelType.MATCH)"
              >创建</el-button
            >
            <el-tree
              class="margin-top20"
              ref="tree"
              :data="比赛标签"
              default-expand-all
              node-key="ID"
              highlight-current
            >
              <template #default="{ data }">
                <div class="container-fluid">
                  <div
                    class="row"
                    :style="{
                      width: '100%',
                      paddingBottom: '6px',
                      paddingTop: '6px',
                      margin: 0,
                      alignItems: 'center',
                    }"
                  >
                    <div class="col">
                      <el-text type="primary">{{ data.name }}</el-text>
                      <span v-if="data.info" class="margin-left20">
                        难度:{{ data.info }}
                      </span>
                      <el-tag
                        type="success"
                        class="margin-left20"
                        v-if="!tenant_id && data.tenant_id"
                      >
                        {{ data.tenant_id }}
                      </el-tag>
                    </div>
                    <div class="text-right" :style="{ width: '500px' }">
                      <el-button-group v-if="!tenant_id">
                        <el-button
                          type="primary"
                          @click="submit(LabelType.MATCH, data.pid)"
                          >创建同级</el-button
                        >
                        <el-button
                          type="info"
                          @click="submit(LabelType.MATCH, data.ID)"
                          >创建子级</el-button
                        >
                        <el-button
                          type="warning"
                          @click="submit(LabelType.MATCH, data.ID, data)"
                          >修改</el-button
                        >
                        <el-button type="danger" @click="del(data.ID)"
                          >删除</el-button
                        >
                      </el-button-group>
                      <el-button-group v-else>
                        <el-button
                          type="warning"
                          @click="submit(LabelType.MATCH, data.ID, data)"
                          >修改</el-button
                        >
                        <el-button
                          v-if="data.tenant_id === tenant_id"
                          type="danger"
                          @click="del(data.ID)"
                        >
                          删除
                        </el-button>
                      </el-button-group>
                    </div>
                  </div>
                </div>
              </template>
            </el-tree>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="Tips" width="40%">
      <template #header>
        <span class="icon-text el-dialog__header-title">
          <el-icon class="text-primary">
            <Guide />
          </el-icon>
          配置{{ activeName }}
        </span>
      </template>
      <el-form ref="form" :model="ruleForm" label-width="100px" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="难度">
          <el-select v-model="ruleForm.info" placeholder="选择难度、非必填项目">
            <el-option label="普及" value="普及"></el-option>
            <el-option label="提高" value="提高"></el-option>
            <el-option label="NOI及以上" value="NOI及以上"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="create">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox, FormRules } from "element-plus";
import { computed, inject, onMounted, reactive, ref } from "vue";
import { useStore } from "vuex";
import { asynccreateorupdatelabel, asyncdellabel } from "../../../api/index";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { findpid } from "../../../util/code";
import { LabelType } from "@/util/data";

const rules = reactive<FormRules>({
  name: [{ required: true, message: "请填写名称", trigger: "blur" }],
});
// 码客行
const tenant_id = inject<string | undefined>("tenant_id", undefined);

const dialogVisible = ref(false);
const ruleForm = reactive<Studycodemodel.ILabel>({ tenant_id });

const store = useStore(Storekey);
const getlabel = computed(() => {
  return store.state.label?.rows || [];
});

const 比赛标签 = computed(() => {
  // e.tenant_id == tenant_id 数据库中没有值是null 要用==
  return findpid(
    getlabel.value.filter((e) => {
      return (
        e.type === LabelType.MATCH &&
        (tenant_id ? e.tenant_id == tenant_id : true)
      );
    })
  );
});

async function create() {
  try {
    // 请填写名称
    if (!ruleForm.name) {
      ElMessage.error("请填写名称");
      return;
    }
    await asynccreateorupdatelabel(ruleForm);
    ElMessage({ message: "添加成功", type: "success" });
    start();
    dialogVisible.value = false;
  } catch (e) {
    ElMessage({ message: String(e), type: "error" });
  }
}

async function submit(
  name: "题目标签" | "题单标签" | "题目知识点" | LabelType,
  pid?: number,
  data?: Studycodemodel.ILabel
) {
  ruleForm.type = name;
  ruleForm.pid = pid;
  ruleForm.ID = undefined;
  ruleForm.name = undefined;
  if (data) {
    ruleForm.ID = data.ID;
    ruleForm.name = data.name;
    ruleForm.pid = data.pid;
  }
  dialogVisible.value = true;
}

onMounted(() => {
  start();
});
async function del(ID: number) {
  ElMessageBox.confirm("确定要删除此标签", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      try {
        await asyncdellabel({ ID });
        ElMessage({ message: "删除成功", type: "success" });
        start();
      } catch (e) {
        ElMessage({ message: String(e), type: "error" });
      }
    })
    .catch(() => {
      ElMessage({ type: "info", message: "已取消" });
    });
}

function start() {
  store.dispatch("actionlabel");
}
const activeName = ref<"比赛标签" | "题单标签" | "题目标签" | "题目知识点">(
  "比赛标签"
);
</script>
<style scoped></style>
<style>
#Label .el-tree-node__content {
  height: auto;
}

.badge {
  margin: 25px;
}

.badge .el-badge__content {
  cursor: pointer;
}

.labetype .el-badge__content {
  display: none;
}
</style>
